【前言】
本系列為個人前端學習之路的學習筆記，在過往的學習過程中累積了很多筆記，如今想藉著IT邦幫忙這個平台做整理+再複習。
本系列標題一律以【】標示該篇文章主要涉及的內容，例如【JavaScript】、【Vue】等等。
若內容有誤，還麻煩各路大神不吝於點出問題，感激不敬。

用<p>包<div>會出錯？

在HTML中，如果我們寫出這樣的程式碼：

<p>
    <div>內容文字</div>
</p>

乍看之下會覺得沒什麼問題，並沒有拼錯字，也沒有少掉結尾標籤
實際用瀏覽器打開之後也沒有跳錯，一切看起來沒問題......嗎？

不，其實問題默默地發生了
如果打開開發者工具，會發現HTML結構變成：

<p> </p>
<div>內容文字<div>
<p></p>

這就很玄了，瀏覽器自動幫我們在<div>前後各補上了</p>和<p>
彷彿像是瀏覽器不允許我們用<p>包<div>一樣
然而，實際上還真的是這樣

並不是每個HTML標籤都能夠任意巢狀

在學習HTML的過程中，像是<ul>或是<table>等等HTML標籤，它們的子層能使用的HTML標籤是有限定的
不過由於多數標籤，尤其像是<p>和<div>這種泛用標籤，我們平常並不會去思考它的使用限制
把<p>類比成<ul>就很好理解了，我們應該要在<ul>裡面放<li>
同樣的，我們不應該在段落（<p>）中放置<div>，這樣邏輯上說不通

因此，瀏覽器在讀到這行邏輯不通的程式碼時，會很貼心（？）的幫忙補上</p>和<p>
從原始碼的結構：

<p>
    <div>內容文字</div>
</p>

變成：

<p> </p>
<div>內容文字<div>
<p></p>

而第一個<p>為何會有空白，也就很好理解了
之前的【HTML】【CSS】如何處理inline-block 元素之間的空白文章中有提到
HTML元素之間的空白、換行及 Tab 字元將佔用一格空間，也就是一格空白字元
因為在一開始撰寫原始碼時，用巢狀結構讓<p>包<div>，所以會有換行
這個換行被當作一個空白字元保留了下來